import { Link } from 'libframe-docs/components'

If we have pages with substantially different rendering logic,
for example different <Link text="Render Modes" href="/render-modes" />,
then we may want to define multiple `renderer/`.

```bash
# Marketing Pages

marketing/pages/index.page.js # /
marketing/pages/about.page.js # /about
marketing/pages/jobs.page.js # /jobs
# Render Marketing Pages as HTML-only
marketing/renderer/_default.page.server.js
marketing/renderer/_default.page.client.js
marketing/renderer/_default.page.route.js # (Route to `/*` instead of `/marketing/*`.)

# Admin Panel

admin-panel/pages/index.page.js
# Render Admin Panel as SPA
admin-panel/renderer/_default.page.server.js
admin-panel/renderer/_default.page.client.js
```

(We use `_default.page.route.js` to change the Filesystem Routing Root, see <Link href="/filesystemRoutingRoot" />.)

## Partial

We can also override only a subset of `renderer/`.

```bash
# Our "default" renderer
renderer/_default.page.server.js
renderer/_default.page.client.js

pages/some-page/index.page.js # Rendered with our default renderer

# Our Product pages need a slightly different client-side.
# We only override `_default.page.client.js` while `_default.page.server.js` stays the same.
pages/product/_default.page.client.js
pages/product/@productId.page.js
pages/product/index.page.js
```

We can then factor out the common code:

```js
// renderer/_default.page.client.ts

import initClient from './initClient.js'

initClient()
```

```js
// pages/product/_default.page.client.ts

import initClient from '../../renderer/initClient.js'

initClient({ installUserTracker: true })
```

## Alternative: `onBeforeRender()`

If the difference is only about data fetching, using different `onBeforeRender()` hooks may be a simpler solution. See <Link href="/data-fetching#global-logic" />.
